@include treelist-ui(
    $ui: 'navigation',
    $padding: 0 10px,

    // Black-ish background color
    $background-color: $panel-navigation-background-color,
    $toolstrip-background-color: #32404e,

    $tool-float-indicator-color: $panel-header-background-color,
    $tool-float-indicator-width: 5px,

    $tool-indicator-selected-color: $panel-header-background-color,
    $tool-indicator-selected-width: 5px,
    $tool-selected-background-color: mix(white, $panel-navigation-background-color, 10%),
    //$tool-selected-color: #fff,
    //$tool-selected-background-color: $panel-header-background-color,

    // Darker background for expanded subtrees
    $item-expanded-background-color: #2c3845,

    // Taller line height
    $item-line-height : $panel-navigation-item-line-height,

    $row-over-background-color: mix(white, $panel-navigation-background-color, 5%),
    $row-selected-background-color: mix(white, $panel-navigation-background-color, 10%),

    // Off-white text
    $item-icon-color: $panel-navigation-item-text-color,
    $item-expander-color: #fff,
    $item-text-color: #ADB3B8,

    // Brighter when hovered
    $item-icon-over-color: #fff,
    $item-expander-over-color: #fff,
    $item-text-over-color: mix(white, $panel-navigation-item-text-color, 50%),
    $item-text-font-size: 16px,

    // Various sizes for the pieces:
    $item-icon-font-size: 18px,
    $item-icon-width: 44px,
    $item-expander-font-size: 16px,
    $item-expander-width: 24px,

    // Style the "row indicator" (the vertical stripe on the left edge):
    $row-indicator-width: 5px,
    $row-indicator-selected-color: $panel-header-background-color,
    $row-indicator-selected-over-color: lighten($panel-header-background-color, 7%),
    $row-indicator-over-color: transparent
);

//--------------------------------------------------------

.app-logo {
    background-color: $base-color;
    height: 45px;
    font-size: 16px;
    color: $lightest-color;    
    div {
        margin-left: 22px;
        line-height: 45px;
        
        i {
          font-size: 22px;
        }
        
        span {
          margin-left: 18px;
          font-weight: bold;
        }        
    }
    
}

.app-dash-dash-headerbar {
    background-color: lighten($base-color, 40%);
    padding:0 10px 0 0;
    position:fixed;
    width:100%;
    z-index:10;
    border:none;
}
.shadow {
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.collapsed{
    .hot-icon,.new-icon{
        &:after{
            display:none;
        }
    }
    .x-tree-elbow-img{
        display:none;
    }

    .x-tree-node-text {
        display:none;
    }
}
.x-grid-cell{
    position:relative;
}
.hot-icon,.new-icon{
    &.hot-icon:after{
        content: "HOT";
        background:#e3495a;
    }
    &.new-icon:after{
        content: "NEW";
        background:$base-color;
    }
    &:after{
        height: 18px;
        width: 34px;
        display: inline-block;
        position: absolute;
        top: 22px;
        right: -180px;
        text-align:center;
        color: $lightest-color;
        font-weight: bold;
        font-size: 10px;
        line-height: 18px;
    }
}

.nav-tree-badge:after {
    position: absolute;
    height: 18px;
    width: 3.3em;
    display: inline-block;
    text-align: center;
    top: 50%;
    margin-top: -9px;
    right: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    line-height: 18px;
}

.nav-tree-badge-hot:after {
    content: "HOT";
    background-color: #e3495a;
}

.nav-tree-badge-new:after {
    content: "NEW";
    background-color: $color-soft-blue;
}

.pop-out {
  -webkit-box-shadow: 2px 2px 8px 2px #ccc;
  -moz-box-shadow: 2px 2px 8px 2px #ccc;
  -ms-box-shadow: 2px 2px 8px 2px #ccc;
  box-shadow: 2px 2px 8px 2px #ccc;
}

.x-treelist-item-tool {
    height: $panel-navigation-item-line-height;
    &.hot-icon:after, &.new-icon:after{
        background: $panel-header-background-color;
        content: '';
    }
}

//Add border around html editor field
.x-html-editor-input{
    border:1px solid #ccc;
}


.no-bg-button {
    &:focus, &:hover{
        background: none;
    }
    &.x-btn-over{
        background-color: #efefef !important;
        border-color: $base-border-color !important;
    }
    &.x-btn-default-toolbar-small {
    	background-color: transparent;
    	border-color: transparent;
    }
}


//UI Styles for buttons
@include extjs-button-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-blue',
    $line-height: 34px,
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-green',
    $line-height: 34px,
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);



@include extjs-button-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);


@include extjs-button-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
    $ui: 'gray',
    $line-height: 34px,
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);


@include extjs-button-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);

@include extjs-button-small-ui(
    $ui: 'header',
    $color: #999,
    $glyph-color: #919191,
    $background-color: transparent,
    $border-width: 0
);


span.label {
	padding: 0.2em 0.6em 0.3em;
	border-radius: 0.25em;
	color: $lightest-color;
}
span.label-warning {
    background-color: rgba(221, 223, 13, 0.7);
    color: $tag-field-item-color;
}
span.label-error {
    background-color: $color-soft-red;
}
span.label-success {
    background-color: $color-soft-green;
}
span.label-info {
    background-color: $tag-field-item-background-color;
    color: $tag-field-item-color;
}


